<template>
	<view class="nja-cell" :style="{height: height + 'px', 'line-height': height + 'px'}" @click="clickHandle">
		<image class="cell-icon" :src="icon"></image>
	    <text class="cell-label">{{label}}</text>
		<slot name="right">
			<uni-icons class="cell-icon-link" v-if="link || event"  color="#A8A6A6"  type="right" size="16"></uni-icons>
		</slot>
		<view  v-if="border" class="cell-border"></view>
	</view>
</template>

<script>
	export default {
		name: 'NjaCell',
		props: {
			label: {
				type: String,
				default: 'label'
			},
			icon: {
				type: String,
				default: '../../static/c1.png'
			},
			border: {
				type: Boolean,
				default: false
			},
			link: {
				type: String,
				default: null
			},
			event: {
				type: Boolean,
				default: false
			},
			height: {
				type: Number,
				default: 44
			}
		},
		methods: {
			clickHandle () {
				if (this.link) {
					uni.navigateTo({
						url: this.link
					})
				}
				if (this.event) {
					this.$emit('click')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.nja-cell {
		width: 100%;
		display: flex;
		flex-direction: row;
		background-color: #fff;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		
		.cell-icon {
			width: 22px;
			height: 22px;
			margin-left: 24px;
			margin-right: 12px;
		}
		.cell-icon-link {
			position: absolute;
			right: 10px;
		}
		.cell-label {
			font-size: 30rpx;
			width: 260px;
			line-height: 1.5;
		} 
		.cell-border {
			position: absolute;
			bottom: 0px;
			width: calc(100% - 24px);
			margin-left: 24px;
			height: 2px;
			border-bottom: 1px solid #EFEFEF;
		}
	}
</style>
